<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%;"
  >
    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span
          style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right"
        >
          <a-button
            @click="toggleScreen"
            icon="appstore"
            style="height:20px;width:20px;border:0px"
          ></a-button>
        </span>
      </div>
    </template>

    <a-spin :spinning="confirmLoading">
      <div v-if="status == 0 || status == 2">
        <a-form-model ref="form" :model="model" :rules="validatorRules">
          <a-form-model-item
            label="用户账号"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="username"
          >
            <a-input
              placeholder="请输入用户账号"
              v-model="model.username"
              :disabled="status == 0 ? true : false"
            />
          </a-form-model-item>

          <template v-if="!model.id">
            <a-form-model-item
              label="登录密码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="password"
            >
              <a-input
                type="password"
                placeholder="请输入登录密码"
                v-model="model.password"
              />
            </a-form-model-item>

            <a-form-model-item
              label="确认密码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="confirmpassword"
            >
              <a-input
                type="password"
                @blur="handleConfirmBlur"
                placeholder="请重新输入登录密码"
                v-model="model.confirmpassword"
              />
            </a-form-model-item>
          </template>

          <a-form-model-item
            label="用户姓名"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="realname"
          >
            <a-input placeholder="请输入用户姓名" v-model="model.realname" />
          </a-form-model-item>

          <!--        <a-form-model-item label="工号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workNo">-->
          <!--          <a-input placeholder="请输入工号" v-model="model.workNo" />-->
          <!--        </a-form-model-item>-->

          <a-form-model-item
            label="手机号码"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="phone"
          >
            <a-input placeholder="请输入手机号码" v-model="model.phone" />
          </a-form-model-item>

          <!--        <a-form-model-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
          <!--          <j-select-position placeholder="请选择职务" :multiple="false" v-model="model.post"/>-->
          <!--        </a-form-model-item>-->

          <a-form-model-item
            label="角色分配"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            v-show="!roleDisabled"
          >
            <j-multi-select-tag
              :disabled="disableSubmit"
              v-model="model.selectedroles"
              :options="rolesOptions"
              placeholder="请选择角色"
            >
            </j-multi-select-tag>
          </a-form-model-item>

          <!--部门分配-->
          <!--        <a-form-model-item label="部门分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">-->
          <!--          <j-select-depart v-model="model.selecteddeparts" :multi="true" @back="backDepartInfo" :backDepart="true" :treeOpera="true">></j-select-depart>-->
          <!--        </a-form-model-item>-->

          <!--        &lt;!&ndash;租户分配&ndash;&gt;-->
          <!--        <a-form-model-item label="租户分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">-->
          <!--          <j-multi-select-tag-->
          <!--                  :disabled="disableSubmit"-->
          <!--                  v-model="model.relTenantIds"-->
          <!--                  :options="tenantsOptions"-->
          <!--                  placeholder="请选择租户">-->
          <!--          </j-multi-select-tag>-->
          <!--        </a-form-model-item>-->

          <!--        <a-form-model-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
          <!--          <a-radio-group  v-model="model.userIdentity"  @change="identityChange">-->
          <!--            <a-radio :value="1">普通用户</a-radio>-->
          <!--            <a-radio :value="2">上级</a-radio>-->
          <!--          </a-radio-group>-->
          <!--        </a-form-model-item>-->
          <!--        <a-form-model-item label="负责部门" :labelCol="labelCol" :wrapperCol="wrapperCol"  v-show="departIdShow==true">-->
          <!--          <j-multi-select-tag-->
          <!--                  :disabled="disableSubmit"-->
          <!--                  v-model="model.departIds"-->
          <!--                  :options="nextDepartOptions"-->
          <!--                  placeholder="请选择负责部门">-->
          <!--          </j-multi-select-tag>-->
          <!--        </a-form-model-item>-->

          <a-form-model-item
            label="头像"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <j-image-upload
              class="avatar-uploader"
              text="上传"
              v-model="model.avatar"
            ></j-image-upload>
          </a-form-model-item>

          <a-form-model-item
            label="生日"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-date-picker
              style="width: 100%"
              placeholder="请选择生日"
              v-model="model.birthday"
              :format="dateFormat"
              :getCalendarContainer="(node) => node.parentNode"
            />
          </a-form-model-item>

          <a-form-model-item
            label="性别"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <!-- <a-select
              v-model="model.sex"
              placeholder="请选择性别"
              :getPopupContainer="(target) => target.parentNode"
            >
              <a-select-option :value="1">男</a-select-option>
              <a-select-option :value="2">女</a-select-option>
            </a-select> -->
            <a-radio-group v-model="model.sex">
              <a-radio :value="1">
                男
              </a-radio>
              <a-radio :value="2">
                女
              </a-radio>
            </a-radio-group>
          </a-form-model-item>

          <a-form-model-item
            label="邮箱"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="email"
          >
            <a-input placeholder="请输入邮箱" v-model="model.email" />
          </a-form-model-item>

          <!--        <a-form-model-item label="座机" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="telephone">-->
          <!--          <a-input placeholder="请输入座机" v-model="model.telephone" />-->
          <!--        </a-form-model-item>-->

          <!--        <a-form-model-item label="工作流引擎" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
          <!--          <j-dict-select-tag  v-model="model.activitiSync"  placeholder="请选择是否同步工作流引擎" :type="'radio'" dictCode="activiti_sync"/>-->
          <!--        </a-form-model-item>-->
        </a-form-model>
      </div>
      <div v-else-if="status == 1">
        <a-form-model ref="form" :model="model" :rules="validatorRules">
          <a-form-model-item
            label="专家姓名"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="expertName"
          >
            <a-input placeholder="请输入专家姓名" v-model="model.expertName" />
          </a-form-model-item>
          <a-form-model-item
            label="性别"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="sex"
          >
            <!-- <a-select
              v-model="model.sex"
              placeholder="请选择性别"
              :getPopupContainer="(target) => target.parentNode"
            >
              <a-select-option :value="1">男</a-select-option>
              <a-select-option :value="2">女</a-select-option>
            </a-select> -->
            <a-radio-group v-model="model.sex">
              <a-radio :value="1">
                男
              </a-radio>
              <a-radio :value="2">
                女
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item
            label="年龄"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="expertAge"
          >
            <a-input-number
              placeholder="请输入年龄"
              v-model="model.expertAge"
              :parser="parseValue"
              :min="0"
              :max="999"
              :step="1"
              style="width: 100%;"
            />
          </a-form-model-item>
          <a-form-model-item
            label="照片"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <j-image-upload
              class="avatar-uploader"
              text="上传"
              v-model="model.expertPhoto"
            ></j-image-upload>
          </a-form-model-item>
          <a-form-model-item
            label="专家电话"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="expertPhone"
          >
            <a-input placeholder="请输入专家电话" v-model="model.expertPhone" />
          </a-form-model-item>
          <a-form-model-item
            label="在线时间"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="time"
          >
            <a-time-picker
              format="HH:mm"
              @change="handleOpenChange"
              placeholder="开始时间"
              style="width: 50%;"
              v-model="model.time"
            /><a-time-picker
              format="HH:mm"
              @change="handleOpenChange2"
              placeholder="结束时间"
              style="width: 50%;"
              v-model="model.time1"
            />
          </a-form-model-item>

          <a-form-model-item
            label="咨询收费"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="expertToll"
          >
            <a-input placeholder="请输入咨询收费" v-model="model.expertToll" />
          </a-form-model-item>
          <a-form-model-item
            label="住址"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="expertAddress"
          >
            <a-textarea
              placeholder="请输入住址"
              v-model="model.expertAddress"
            />
          </a-form-model-item>
          <a-form-model-item
            label="擅长领域"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="expertExcel"
          >
            <!-- <a-textarea
              placeholder="请输入擅长领域"
              v-model="model.expertExcel"
            /> -->
            <a-checkbox-group v-model="model.expertExcel" @change="getVls">
            <a-checkbox v-for="(item,idx) in skillsList" :disabled="chooseList.length > 2 && item.disabled" :key="idx" :value="item.itemValue" name="type">
              {{ item.itemText }}
            </a-checkbox>
          </a-checkbox-group>



          </a-form-model-item>

          <a-form-model-item
            label="专家简介"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="expertBriefIntroduction"
          >
            <a-textarea
              placeholder="请输入专家简介"
              v-model="model.expertBriefIntroduction"
            />
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-spin>

    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm
        title="确定放弃编辑？"
        @confirm="handleCancel"
        okText="确定"
        cancelText="取消"
      >
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading"
        >提交</a-button
      >
    </div>
  </a-drawer>
</template>

<script>
import moment from "moment";
import Vue from "vue";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import { getAction } from "@/api/manage";
import { addUser, editUser, queryUserRole, queryall } from "@/api/api";
import { disabledAuthFilter } from "@/utils/authFilter";
import { duplicateCheck ,skillsAPI} from "@/api/api";
import { appLication, addexpert } from "@/api/tsapi";
export default {
  name: "UserModal",
  components: {},
  data() {
    return {
      departDisabled: false, //是否是我的部门调用该页面
      roleDisabled: false, //是否是角色维护调用该页面
      modalWidth: 800,
      drawerWidth: 700,
      modaltoggleFlag: true,
      confirmDirty: false,
      userId: "", //保存用户id
      disableSubmit: false,
      dateFormat: "YYYY-MM-DD",
      validatorRules: {
        username: [
          { required: true, message: "请输入用户账号!" },
          { validator: this.validateUsername },
        ],
        password: [
          { required: true, message: "请输入登录密码!" },
          { validator: this.validateToNextPassword, trigger: "change" },
        ],
        confirmpassword: [
          { required: true, message: "请重新输入登录密码!" },
          { validator: this.compareToFirstPassword },
        ],
        realname: [{ required: true, message: "请输入用户名称!" }],
        phone: [{ validator: this.validatePhone }],
        email: [{ validator: this.validateEmail }],
        roles: {},
        expertName: [
          { required: true, message: "请输专家姓名" },
          { validator: this.expertName },
        ],
        sex: [
          { required: true, message: "请选择性别" },
          // { validator: this.sex },
        ],
        expertAge: [
          { required: true, message: "请输入年龄" },
          // { validator: this.expertAge },
        ],
        expertPhone: [
          { required: true, message: "请输入电话" },
          { validator: this.expertPhone },
        ],
        expertOnline: [
          { required: true, message: "请选择在线时长" },
          { validator: this.expertOnline },
        ],
        expertToll: [
          { required: true, message: "请输入咨询收费" },
          { validator: this.expertToll },
        ],
        expertExcel: [
          { required: true, message: "请选择擅长领域" },
          // { validator: this.expertExcel },
        ],
        expertAddress: [
          { required: true, message: "请输入地址" },
          { validator: this.expertAddress },
        ],
        time: [
          { required: true, message: "请选择开始时间和结束时间" },
          // { validator: this.time },
        ],
      },
      departIdShow: false,
      title: "操作",
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      uploadLoading: false,
      confirmLoading: false,
      headers: {},
      url: {
        fileUpload: window._CONFIG["domianURL"] + "/sys/common/upload",
        userWithDepart: "/sys/user/userDepartList", // 引入为指定用户查看部门信息需要的url
        userId: "/sys/user/generateUserId", // 引入生成添加用户情况下的url
        syncUserByUserName: "/act/process/extActProcess/doSyncUserByUserName", //同步用户到工作流
        queryTenantList: "/sys/tenant/queryList",
      },
      tenantsOptions: [],
      rolesOptions: [],
      nextDepartOptions: [],
      status: "", //使用该状态判断是编辑还是成为专家
      zjid: "", //拿到生成的专家id
      starttime: "",
      endtime: "",
      skillsList:[],
      chooseList:[],
    };
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN);
    this.headers = { "X-Access-Token": token };
    this.initRoleList();
    this.initTenantList();
    this.queySkills();
  },
  computed: {
    uploadAction: function() {
      return this.url.fileUpload;
    },
  },
  methods: {
    //限制年龄小数点和负数
    parseValue(value) {
      // 如果输入值不是数字或者小数，则返回0
      if (isNaN(value) || value.indexOf(".") !== -1 || value < 0) {
        return 0;
      }
      return value;
    },
    //开始时间
    handleOpenChange(e, data) {
      this.starttime = data;
    },
    //结束时间
    handleOpenChange2(e, data) {
      this.endtime = data;
    },
    add() {
     
      this.refresh();
      this.status = 2;
      let that = this;
      that.visible = true;
      const obj = {
        sex:1
      }
      console.log(this.model.expertExcel, "type");
      that.model = Object.assign({},obj)
      // this.edit({ activitiSync: "1", userIdentity: 1 });
    },
    edit(record, type) {
      console.log(this.model.expertExcel, "type");
      if (type != undefined) {
        this.status = type;
      }
      let that = this;
      that.visible = true;

      //根据屏幕宽度自适应抽屉宽度
      this.resetScreenSize();
      if (type == 0) {
        that.userId = record.id;
        that.model = Object.assign(
          // {},
          { selectedroles: "", selecteddeparts: "" },
          record
        );
        console.log(that.model, "model");
        //身份为上级显示负责部门，否则不显示
        if (this.model.userIdentity == 2) {
          this.departIdShow = true;
        } else {
          this.departIdShow = false;
        }

        if (record.hasOwnProperty("id")) {
          that.getUserRoles(record.id);
          that.getUserDeparts(record.id);
        }
      } else if (type == 1) {
        that.userId = record.id;
        const obj = {
          expertPhoto:record.avatar,
          sex:record.sex == null ? 1 : record.sex,
          expertPhone:record.phone,
          expertAge:record.age,
          expertName:record.realname
        }
        
      that.model = Object.assign({},obj)
        appLication({ userId: record.id }).then((res) => {
          if (res.code == 200) {
            this.zjid = res.result.id;
          } else {
            that.visible = false;
            this.$message.warning(res.message);
          }
        });
      }
    },
    isDisabledAuth(code) {
      return disabledAuthFilter(code);
    },
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth;
      } else {
        this.modalWidth = 800;
      }
      this.modaltoggleFlag = !this.modaltoggleFlag;
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth;
      } else {
        this.drawerWidth = 700;
      }
    },
    //初始化租户字典
    initTenantList() {
      getAction(this.url.queryTenantList).then((res) => {
        if (res.success) {
          this.tenantsOptions = res.result.map((item, index, arr) => {
            let c = { label: item.name, value: item.id + "" };
            return c;
          });
          console.log("this.tenantsOptions: ", this.tenantsOptions);
        }
      });
    },
    //初始化角色字典
    initRoleList() {
      queryall().then((res) => {
        if (res.success) {
          this.rolesOptions = res.result.map((item, index, arr) => {
            let c = { label: item.roleName, value: item.id };
            return c;
          });
          console.log("this.rolesOptions: ", this.rolesOptions);
        }
      });
    },
    getUserRoles(userid) {
      queryUserRole({ userid: userid }).then((res) => {
        if (res.success) {
          this.model.selectedroles = res.result.join(",");
          console.log("that.model.selectedroles=", this.model.selectedroles);
        }
      });
    },
    getUserDeparts(userid) {
      let that = this;
      getAction(that.url.userWithDepart, { userId: userid }).then((res) => {
        if (res.success) {
          let departOptions = [];
          let selectDepartKeys = [];
          for (let i = 0; i < res.result.length; i++) {
            selectDepartKeys.push(res.result[i].key);
            //新增负责部门选择下拉框
            departOptions.push({
              value: res.result[i].key,
              label: res.result[i].title,
            });
          }
          that.model.selecteddeparts = selectDepartKeys.join(",");
          that.nextDepartOptions = departOptions;
          console.log("that.nextDepartOptions=", that.nextDepartOptions);
        }
      });
    },
    backDepartInfo(info) {
      this.model.departIds = this.model.selecteddeparts;
      this.nextDepartOptions = info.map((item, index, arr) => {
        let c = { label: item.text, value: item.value + "" };
        return c;
      });
    },
    refresh() {
      this.userId = "";
      this.nextDepartOptions = [];
      this.departIdShow = false;
    },
    close() {
      if (this.status == 1) {
        this.visible = false;
        this.status = "";
        this.$refs.form.resetFields();
      } else {
        this.$emit("close");
        this.visible = false;
        this.disableSubmit = false;
        this.nextDepartOptions = [];
        this.departIdShow = false;
        this.$refs.form.resetFields();
        this.model = {};
      }
    },
    moment,
    handleSubmit() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true;
          //如果是上级择传入departIds,否则为空
          if (this.model.userIdentity !== 2) {
            this.model.departIds = "";
          }
         
          let obj;
          if (!this.model.id) {
            this.model.id = this.userId;
            if (this.status == 1) {
              console.log(this.userId, "userid");
              const expertOnline = this.starttime + "——" + this.endtime;
              this.model["expertOnline"] = expertOnline;
              this.model["expertId"] = this.zjid;
              this.model.expertExcel= this.model.expertExcel.join(','),
              console.log(this.model, "expertonline");
              obj = addexpert(this.model);
            } else {
              obj = addUser(this.model);
            }
          } else {
            obj = editUser(this.model);
          }
          obj
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit("ok");
                that.model = {};
                this.chooseList = []
              } else {
                that.$message.warning(res.message);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
              that.close();
            });
        } else {
          return false;
        }
      });
    },
    handleCancel() {
      this.close();
      this.status = "";
      this.chooseList = []
    },
    validateToNextPassword(rule, value, callback) {
      const confirmpassword = this.model.confirmpassword;
      if (value && confirmpassword && value !== confirmpassword) {
        callback("两次输入的密码不一样！");
      }
      if (value && this.confirmDirty) {
        this.$refs.form.validateField(["confirmpassword"]);
      }
      callback();
    },
    compareToFirstPassword(rule, value, callback) {
      if (value && value !== this.model.password) {
        callback("两次输入的密码不一样！");
      } else {
        callback();
      }
    },
    validatePhone(rule, value, callback) {
      if (!value) {
        callback();
      } else {
        if (new RegExp(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/).test(value)) {
          var params = {
            tableName: "sys_user",
            fieldName: "phone",
            fieldVal: value,
            dataId: this.userId,
          };
          duplicateCheck(params).then((res) => {
            if (res.success) {
              callback();
            } else {
              callback("手机号已存在!");
            }
          });
        } else {
          callback("请输入正确格式的手机号码!");
        }
      }
    },
    expertPhone(rule, value, callback) {
      if (!value) {
        callback();
      } else {
        if (new RegExp(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/).test(value)) {
          var params = {
            tableName: "sys_user",
            fieldName: "phone",
            fieldVal: value,
            dataId: this.userId,
          };
          duplicateCheck(params).then((res) => {
            if (res.success) {
              callback();
            } else {
              callback("手机号已存在!");
            }
          });
        } else {
          callback("请输入正确格式的手机号码!");
        }
      }
    },
    validateEmail(rule, value, callback) {
      if (!value) {
        callback();
      } else {
        if (
          new RegExp(
            /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
          ).test(value)
        ) {
          var params = {
            tableName: "sys_user",
            fieldName: "email",
            fieldVal: value,
            dataId: this.userId,
          };
          duplicateCheck(params).then((res) => {
            console.log(res);
            if (res.success) {
              callback();
            } else {
              callback("邮箱已存在!");
            }
          });
        } else {
          callback("请输入正确格式的邮箱!");
        }
      }
    },
    validateUsername(rule, value, callback) {
      var params = {
        tableName: "sys_user",
        fieldName: "username",
        fieldVal: value,
        dataId: this.userId,
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback();
        } else {
          callback("用户名已存在!");
        }
      });
    },
    validateWorkNo(rule, value, callback) {
      var params = {
        tableName: "sys_user",
        fieldName: "work_no",
        fieldVal: value,
        dataId: this.userId,
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback();
        } else {
          callback("工号已存在!");
        }
      });
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    beforeUpload: function(file) {
      var fileType = file.type;
      if (fileType.indexOf("image") < 0) {
        this.$message.warning("请上传图片");
        return false;
      }
      //TODO 验证文件大小
    },
    identityChange(e) {
      if (e.target.value === 1) {
        this.departIdShow = false;
      } else {
        this.departIdShow = true;
      }
    },
    queySkills(){
      console.log("我执行了么")
      skillsAPI({dictId:'1750089799336751105'}).then(res => {
        console.log("技能选择============>",res)
        this.skillsList = res.result.records
        console.log(" this.skillsList", this.skillsList)
      }).catch(err =>{
        console.log("技能报错==============>",err)
      })
    },
    getVls(e){
      this.chooseList = e
      console.log("list=======>",this.skillsList);
      let arr = []
      for(const i in this.skillsList){
        for(const vls of e){
          if(this.skillsList[i].itemValue == vls){
            arr.push(i)
            this.skillsList[i].disabled = false
          }else{
            this.skillsList[i].disabled = true
          }
        }        
      }

     
      for(const vls of arr){
        this.skillsList[vls].disabled = false
      }
      console.log('arr============>',arr)
      
    },
  },
};
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}

/*【JTC-502】 添加用户两个滚动条*/
/deep/ .ant-drawer-body {
  padding-bottom: 53px;
}
</style>
